<template>
    <div class="wallet">
        <div class="banner"></div>
        <b-container class="content">
            <div class="section top pdTop">
                <div class="title">DLBWallet</div>
                <img src="./images/title.png">
                <a class="download" href="https://github.com/dlb-bigdata/DLB-wallet/releases/download/0.0.0/dlb-wallet.Setup.0.0.1.exe">{{$t('wallet.download')}}</a>
            </div>
            <div class="section middle pdTop">
                <div class="title">Characteristic<span class="subtitle">{{$t('wallet.character.title')}}</span></div>
                <b-row>
                    <b-col xl="4" lg="4" md="4" sm="12" v-for="(item,index) in $t('wallet.character.ways')" :key="index">
                        <img :src="require(`./images/character-img-${index+1}.png`)">
                        <h3>{{item.title}}</h3>
                        <div class="desc">{{item.desc}}</div>
                    </b-col>
                </b-row>
            </div>
            <div class="section function pdTop pdBot">
                <div class="title">Function<span class="subtitle">{{$t('wallet.funcion.title')}}</span></div>
                <div class="desc">{{$t('wallet.funcion.desc')}}</div>
                <b-row>
                    <b-col xl="2" lg="2" md="2" sm="4" v-for="(item,index) in $t('wallet.funcion.ways')" :key="index" class="list">
                        <div class="img"><img :src="require(`./images/funcion-img-${index+1}.png`)"></div>
                        <div class="desc">{{item}}</div>
                    </b-col>
                </b-row>
                <div class="imgs">
                    <img src="./images/function-1.png" alt="">
                    <img src="./images/function-2.png" alt="">
                </div>
            </div>
        </b-container>
    </div>
</template>

<style lang="scss" scoped>
.wallet{
    .banner{
        height:560px;
        background:linear-gradient(100deg,rgba(162,190,255,1),rgba(73,105,245,1));
        position:absolute;
        top:0;
        left:0;
        right:0;
        z-index: -1;
    }
    .section{
        text-align: center;
        .title{
            font-size:120px;
            color: #FAF7F8;
            position: relative;
            .subtitle{
                font-size:32px;
                color: #666;
                position: absolute;
                top:50%;
                left:50%;
                transform: translateX(-50%);
            }
        }
        h3{
            color:#666666;
            margin:40px 0 20px 0;
        }
    }
    .top{
        .title{
            color: rgba(255,255,255,.1);
        }
        img{
            max-width: 100%;
            position: relative;
            top:-60px;
        }
        .download{
            font-size:20px;
            color: #fff;
            width:216px;
            height:55px;
            line-height: 55px;
            text-align: center;
            background:linear-gradient(106deg,rgba(162,190,255,1),rgba(108,150,255,1));
            border-radius:10px;
            margin:0 auto;
            cursor: pointer;
        }
    }
    .middle{
        .desc{
            margin-bottom:20px;
        }
    }
    .function{
        margin:0 60px;
        .list{
            margin-top:50px;
            .desc{
                margin-top:20px;
            }
            .img{
                width:53px;
                height:53px;
                background:#8FD986;
                border-radius:50%;
                margin:0 auto;
                position: relative;
                img{
                    position: absolute;
                    top:50%;
                    left:50%;
                    transform: translate(-50%,-50%)
                }
            }
            &:nth-child(2){
                .img{
                    background:#5FA0FF;
                }
            }
            &:nth-child(3){
                .img{
                    background:#92E0D0;
                }
            }
            &:nth-child(4){
                .img{
                    background:#F6CE54;
                }
            }
            &:nth-child(5){
                .img{
                    background:#E8838E;
                }
            }
            &:nth-child(6){
                .img{
                    background:#9388EE;
                }
            }
        }
        .imgs{
            margin-top:60px;
            position: relative;
            text-align: right;
            img{
                max-width:100%;
                margin-bottom:20px;
                &:first-child{
                    position: absolute;
                    top:50%;
                    left:0;
                    z-index: -1;
                    transform: translateY(-50%);
                }
            }
        }
    }
}
</style>
